<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加和删除表格</title>
    <style>
        div {
            text-align: center;
        }
        table{
            margin: auto;
        }
        td{
            text-align: center;
        }
    </style>
</head>
<body>
<div >
    <input type="text"  id="name" placeholder="请输入姓名" autocomplete="off">
    <input type="text" id="age" placeholder="请输入年龄" autocomplete="off">
    <input type="text" id="gender" placeholder="请输入性别" autocomplete="off">&nbsp;
    <input type="button" id="add" value="添  加" onclick="fun1()">
</div><hr>

<table id="tb" border="1px" cellspacing="0" width="550px">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>23</td>
        <td>男</td>
        <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
    </tr>
    <tr>
        <td>路飞</td>
        <td>22</td>
        <td>男</td>
        <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
    </tr>
</table>
<!--添加学生-->
<script>
// 1. 为添加按钮绑定单击事件。
// 2. 创建 tr 元素。
function fun1() {
    let tr = document.createElement("tr");
// 3. 创建 4 个 td 元素。
    let td1 = document.createElement("td");
    let td2 = document.createElement("td");
    let td3 = document.createElement("td");
    let td4 = document.createElement("td");
// 4. 将 td 添加到 tr 中。
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tr.appendChild(td4);
// 5. 获取文本框输入的信息。
    let name = document.getElementById("name").value;
    let age = document.getElementById("age").value;
    let gender = document.getElementById("gender").value;
// 6. 创建 3 个文本元素。
    let nameText = document.createTextNode(name);
    let ageText = document.createTextNode(age);
    let genderText = document.createTextNode(gender);
// 7. 将文本元素添加到对应的 td 中。
    td1.appendChild(nameText);
    td2.appendChild(ageText);
    td3.appendChild(genderText);
// 8. 创建 a 元素。
    let a = document.createElement("a");
    let aText = document.createTextNode("删除");
    a.setAttribute("href", "JavaScript:void(0);");
    a.setAttribute("onclick", "drop(this)");
    a.appendChild(aText);
// 9. 将 a 元素添加到对应的 td 中。
    td4.appendChild(a);
// 10. 将 tr 添加到 table 中。
    let table = document.getElementById("tb");
    table.appendChild(tr);
}


// 删除功能分析
// 1. 为每个删除超链接添加单击事件属性。
// 2. 定义删除的方法。
function drop(obj) {
// 3. 获取 table 元素。
    let table = obj.parentElement.parentElement.parentElement;
// 4. 获取 tr 元素。
    let tr = obj.parentElement.parentElement;
// 5. 通过 table 删除 tr。
    table.removeChild(tr);
}
</script>












</body>














</html>